<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>表单控件状态——禁用状态</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<!--
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理：
/*源码请查看bootstrap.css文件第1723行～第1729行*/

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
使用方法为：只需要在需要禁用的form-control类表单控件上加上“disabled”即可：

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

-->
<h3>示例1</h3>
<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
    </div>
  </div> 
</form> 
<br>
<br>
<br>
<h3>示例2</h3>   
<form role="form">
  <fieldset disabled><!--集体禁用-->
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框</label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form> 
<br>
<br>
<br>
<h3>示例3</h3>
<form role="form">
  <fieldset disabled><!--集体禁用-->
  
    <!--对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。-->
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框</label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>  
</body>
</html>